﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 基本配置 -->
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- 图标标题 -->
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/icon"/>
    <title>云曦·云中舍</title>

    <!-- font插件 -->
    <link rel="stylesheet" th:href="@{/assets/fonts/icomoon/style.css}">
    <link rel="stylesheet" th:href="@{/assets/fonts/flaticon/font/flaticon.css}">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

    <!-- css插件 -->
    <!-- bootstrap -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css}">
    <!-- jquery-ui -->
    <link rel="stylesheet" th:href="@{/plugins/jquery-ui/jquery-ui.css}">
    <!-- owl -->
    <link rel="stylesheet" th:href="@{/plugins/owl/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/owl/owl.theme.default.min.css}">
    <!-- jquery-fancybox -->
    <link rel="stylesheet" th:href="@{/plugins/jquery-fancybox/jquery.fancybox.min.css}">
    <!-- bootstrap-datepicker -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-datepicker/bootstrap-datepicker.css}">
    <!-- aos -->
    <link rel="stylesheet" th:href="@{/plugins/aos/aos.css}">
    <!-- 自定义 -->
    <link rel="stylesheet" th:href="@{/assets/css/resident/style.css}">
</head>

<body data-spy="scroll"
      data-target=".site-navbar-target"
      data-offset="300"
>
<div th:insert="load::loadcontent"></div>

<div class="site-wrap">
    <div class="site-mobile-menu site-navbar-target">
        <div class="site-mobile-menu-header">
            <div class="site-mobile-menu-close mt-3">
                <span class="icon-close2 js-menu-toggle"></span>
            </div>
        </div>
        <div class="site-mobile-menu-body"></div>
    </div>

    <header class="site-navbar js-sticky-header site-navbar-target" role="banner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-6 col-xl-2">
                    <div style="display: flex">
                        <img th:src="@{/assets/imgs/resident/index/YunXi-logo.png}"
                             alt=""
                             id="banner-logo"
                        >
                        <h1 class="mb-0 site-logo" style="display: flex">
                            <a href="/index"
                               class="h2 mb-0"
                               id="banner-title"
                            >
                                云中舍
                                <span class="text-primary"></span>
                            </a>
                        </h1>
                    </div>
                </div>

                <div class="col-12 col-md-10 d-none d-xl-block">
                    <nav class="site-navigation position-relative text-right" role="navigation">
                        <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block" id="banner-menu">
                            <li>
                                <a href="#home-section" class="nav-link">首页</a>
                            </li>
                            <li>
                                <a href="#about-section" class="nav-link">关于项目</a>
                            </li>
                            <li>
                                <a href="#" class="nav-link">业务模块</a>
                            </li>
                            <li>
                                <a href="#" class="nav-link">征信中心</a>
                            </li>
                            <li class="social">
                                <a href="#" class="nav-link">
                                    <span class="icon-facebook"></span>
                                </a>
                            </li>
                            <li class="social">
                                <a href="#" class="nav-link">
                                    <span class="icon-twitter"></span>
                                </a>
                            </li>
                            <li class="social">
                                <a href="#" class="nav-link">
                                    <span class="icon-linkedin"></span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top: 3px">
                    <a href="#" class="site-menu-toggle js-menu-toggle float-right">
                        <span class="icon-menu h3"></span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="site-blocks-cover overlay"
         style="background-image: url('/assets/imgs/resident/index/home.png')"
         data-aos="fade"
         id="home-section"
    >
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-md-10 mt-lg-5 text-center">
                    <div class="single-text owl-carousel">
                        <div class="slide">
                            <h1 class="text-uppercase" data-aos="fade-up">虚拟货币交易</h1>
                            <p class="mb-5 desc"
                               data-aos="fade-up"
                               data-aos-delay="100"
                            >
                                一站式解决虚拟交易问题，使您的交易更安全便捷
                            </p>
                            <div data-aos="fade-up" data-aos-delay="100"></div>
                        </div>

                        <div class="slide">
                            <h1 class="text-uppercase" data-aos="fade-up">基于Hyperledger联盟链</h1>
                            <p class="mb-5 desc"
                               data-aos="fade-up"
                               data-aos-delay="100"
                            >
                                采用区块链技术中最大的联盟链项目——HyperledgerFabric,链端技术成熟有保障
                            </p>
                        </div>

                        <div class="slide">
                            <h1 class="text-uppercase" data-aos="fade-up">征信信息一键全览</h1>
                            <p class="mb-5 desc"
                               data-aos="fade-up"
                               data-aos-delay="100"
                            >
                                采用分布式去中心化技术的征信系统，个人征信信息更真实权威可靠
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <a href="#next" class="mouse smoothscroll">
            <span class="mouse-icon">
                <span class="mouse-wheel"></span>
            </span>
        </a>
    </div>

    <div class="site-section" id="next">
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-4 text-center"
                     data-aos="fade-up"
                     data-aos-delay=""
                >
                    <img th:src="@{/assets/fonts/flaticon/flaticon-svg/svg/001-wallet.svg}"
                         alt="您的虚拟钱包"
                         class="img-fluid w-25 mb-4"
                    >
                    <h3 class="card-title">您的虚拟钱包</h3>
                    <p>在链信银行注册后，您将拥有一个虚拟账户，开启您的虚拟交易之旅</p>
                </div>
                <div class="col-md-4 text-center"
                     data-aos="fade-up"
                     data-aos-delay="100"
                >
                    <img th:src="@{/assets/fonts/flaticon/flaticon-svg/svg/008-coin.svg}"
                         alt="虚拟货币技术"
                         class="img-fluid w-25 mb-4"
                    >
                    <h3 class="card-title">虚拟货币技术</h3>
                    <p>虚拟货币让您拥有不一样的交易体验，凡注册账户即有100000虚拟币</p>
                </div>
                <div class="col-md-4 text-center"
                     data-aos="fade-up"
                     data-aos-delay="200"
                >
                    <img th:src="@{/assets/fonts/flaticon/flaticon-svg/svg/006-credit-card.svg}"
                         alt="虚拟账户"
                         class="img-fluid w-25 mb-4"
                    >
                    <h3 class="card-title">虚拟账户</h3>
                    <p>您可以将虚拟货币存到虚拟账户上并在上面实现虚拟交易</p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 mb-5"
                     data-aos="fade-up"
                     data-aos-delay=""
                >
                    <figure class="circle-bg">
                        <img th:src="@{/assets/imgs/resident/index/welcome.jpg}"
                             alt="欢迎使用~"
                             class="img-fluid"
                        >
                    </figure>
                </div>
                <div class="col-lg-5 ml-auto"
                     data-aos="fade-up"
                     data-aos-delay="100"
                >
                    <div class="mb-4">
                        <h3 class="h3 mb-4 text-black">欢迎使用链信银行</h3>
                        <p>百闻不如一试，点击注册登录，未来的交易模式就此开始</p>
                    </div>

                    <div class="mb-4">
                        <ul class="list-unstyled ul-check success">
                            <li>交易模式新兴有趣</li>
                            <li>虚拟交易安全快捷</li>
                            <li>个人征信一键知晓</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-section cta-big-image" id="about-section">
        <div class="container">
            <div class="row mb-5 justify-content-center">
                <div class="col-md-8 text-center">
                    <h2 class="section-title mb-3"
                        data-aos="fade-up"
                        data-aos-delay=""
                    >
                        关于项目
                    </h2>
                    <p class="lead"
                       data-aos="fade-up"
                       data-aos-delay="100"
                    >
                        链信银行——为方便客户虚拟交易的安全可视和个人征信信息管理的便利而生
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 mb-5"
                     data-aos="fade-up"
                     data-aos-delay=""
                >
                    <figure class="circle-bg">
                        <img th:src="@{/assets/imgs/resident/index/hero_1.jpg}"
                             alt="Free Website Template by Free-Template.co"
                             class="img-fluid"
                        >
                    </figure>
                </div>
                <div class="col-lg-5 ml-auto"
                     data-aos="fade-up"
                     data-aos-delay="100"
                >
                    <h3 class="text-black mb-4">为您提供前所未有的交易体验</h3>
                    <p>
                        虚拟货币交易作为一种新兴的交易手段，近几年在世界金融界越发流行，链信银行就是为了方便客户虚拟交易的可视化和个人征信信息管理而设计的。</p>
                    <p>
                        链信银行的应用将使虚拟交易更加安全简便快捷，使用户交易和征信信息可视化更强，在充分保证客户隐私信息安全的同时提高业务的办理效率。</p>
                </div>
            </div>
        </div>
    </div>

    <section class="site-section">
        <div class="container">
            <div class="row mb-5 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="section-title mb-3"
                        data-aos="fade-up"
                        data-aos-delay=""
                    >
                        如何使用
                    </h2>
                    <p class="lead"
                       data-aos="fade-up"
                       data-aos-delay="100"
                    >
                        三步走，带您轻松上手链信银行
                    </p>
                </div>
            </div>

            <div class="row align-items-lg-center">
                <div class="col-lg-6 mb-5"
                     data-aos="fade-up"
                     data-aos-delay=""
                >
                    <div class="owl-carousel slide-one-item-alt">
                        <img th:src="@{/assets/imgs/resident/index/slide_1.jpg}"
                             alt="Image"
                             class="img-fluid"
                        >
                        <img th:src="@{/assets/imgs/resident/index/slide_2.jpg}"
                             alt="Image"
                             class="img-fluid"
                        >
                        <img th:src="@{/assets/imgs/resident/index/slide_3.jpg}"
                             alt="Image"
                             class="img-fluid"
                        >
                    </div>
                    <div class="custom-direction">
                        <a href="#" class="custom-prev">
                            <span>
                                <span class="icon-keyboard_backspace"></span>
                            </span>
                        </a>
                        <a href="#" class="custom-next">
                            <span>
                                <span class="icon-keyboard_backspace"></span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 ml-auto"
                     data-aos="fade-up"
                     data-aos-delay="100"
                >
                    <div class="owl-carousel slide-one-item-alt-text">
                        <div>
                            <h2 class="section-title mb-3">01. 注册账号并登录</h2>
                            <p>
                                进入注册登录界面，填写您的相关个人信息即可完成注册，在此页面进行登录操作以进入业务操作模块页面</p>
                            <p>
                                <a href="#" class="btn btn-primary mr-2 mb-2">详细学习</a>
                            </p>
                        </div>
                        <div>
                            <h2 class="section-title mb-3">02. 开启新的虚拟账户</h2>
                            <p>
                                在业务操作页面，点击左侧主菜单中的开启账户子菜单，设置简单的必要信息后即可开启一个新账户（目前一人仅能拥有一个账户）</p>
                            <p>
                                <a href="#" class="btn btn-primary mr-2 mb-2">详细学习</a>
                            </p>
                        </div>
                        <div>
                            <h2 class="section-title mb-3">03. 开始您的虚拟交易</h2>
                            <p>
                                现在，您可以尽情使用链信银行的虚拟交易业务啦~，初始会为您提供十万虚拟币以供您有一个愉快的虚拟交易体验</p>
                            <p>
                                <a href="#" class="btn btn-primary mr-2 mb-2">详细学习</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-5">
                            <h2 class="footer-heading mb-4">关于作者</h2>
                            <p>云曦·云中舍研发团队</p>
                        </div>
                        <div class="col-md-3 ml-auto">
                            <h2 class="footer-heading mb-4">快捷链接</h2>
                            <ul class="list-unstyled">
                                <li>
                                    <a href="#home-section" class="smoothscroll">首页</a>
                                </li>
                                <li>
                                    <a href="#about-section" class="smoothscroll">关于项目</a>
                                </li>
                                <li>
                                    <a href="#" class="smoothscroll">业务模块</a>
                                </li>
                                <li>
                                    <a href="#" class="smoothscroll">征信中心</a>
                                </li>
                                <li>
                                    <a href="#" class="smoothscroll">登录注册</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-3 footer-social">
                            <h2 class="footer-heading mb-4">更多作品Gitee仓库链接</h2>
                            <ul class="list-unstyled">
                                <li>
                                    <a href="#home-section" class="smoothscroll">云曦·林海</a>
                                </li>
                                <li>
                                    <a href="#about-section" class="smoothscroll">云曦·疫物易物</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <h2 class="footer-heading mb-4">开发者说</h2>
                    <form action="#" method="post" class="footer-subscribe">
                        <div class="input-group mb-3">
                            <p>欢迎大家前来体验虚拟交易的乐趣~</p>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row pt-5 mt-5 text-center">
                <div class="col-md-12">
                    <div class="border-top pt-5">
                        <p class="copyright">
                            <small>
                                Copyright &copy
                                <script>document.write(new Date().getFullYear().toString())</script>
                                云曦·云中舍开发团队 | 版权所有
                            </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>

<style>
    #banner-logo {
        margin-bottom: 8px;
        height: 85px;
        flex: 1 1 auto;
    }
    #banner-title {
        margin-top: 30px;
        text-decoration: none;
        font-weight: bold;
        font-family: Flaticon,serif;
        flex: 1 1 auto;
    }
    #banner-menu {
        margin-left: 550px;
    }
</style>

<!-- js插件 -->
<!-- bootstrap -->
<script th:src="@{/plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js}"></script>
<!-- jquery-ui -->
<script th:src="@{/plugins/jquery-ui/jquery-ui.js}"></script>
<!-- popper -->
<script th:src="@{/plugins/popper/popper.min.js}"></script>
<!-- owl -->
<script th:src="@{/plugins/owl/owl.carousel.min.js}"></script>
<!-- jquery-countdown -->
<script th:src="@{/plugins/jquery-countdown/jquery.countdown.min.js}"></script>
<!-- jquery-easing -->
<script th:src="@{/plugins/jquery-easing/jquery.easing.1.3.js}"></script>
<!-- aos -->
<script th:src="@{/plugins/aos/aos.js}"></script>
<!-- jquery-fancybox -->
<script th:src="@{/plugins/jquery-fancybox/jquery.fancybox.min.js}"></script>
<!-- jquery-sticky -->
<script th:src="@{/plugins/jquery-sticky/jquery.sticky.js}"></script>
<!-- isotope-pkgd -->
<script th:src="@{/plugins/isotope-pkgd/isotope.pkgd.min.js}"></script>
<!-- 自定义 -->
<script th:src="@{/js/resident/index.js}"></script>
<script>
    $(document).ready(function () {
        "use strict";

        // dom定义
        const body = $('body')
        const nonLoop = $('.nonloop-block-13')
        const datepicker = $('.datepicker')

        const siteMenuClone = function () {

            $('.js-clone-nav').each(function () {
                const $this = $(this);
                $this.clone().attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
            });


            setTimeout(function () {

                let counter = 0;
                $('.site-mobile-menu .has-children').each(function () {
                    const $this = $(this);

                    $this.prepend('<span class="arrow-collapse collapsed">');

                    $this.find('.arrow-collapse').attr({
                        'data-toggle': 'collapse',
                        'data-target': '#collapseItem' + counter,
                    });

                    $this.find('> ul').attr({
                        'class': 'collapse',
                        'id': 'collapseItem' + counter,
                    });
                    counter++;
                });

            }, 1000);

            body.on('click', '.arrow-collapse', function (e) {
                const $this = $(this);
                if ($this.closest('li').find('.collapse').hasClass('show')) {
                    $this.removeClass('active');
                } else {
                    $this.addClass('active');
                }
                e.preventDefault();

            });

            $(window).resize(function () {
                const $this = $(this),
                    w = $this.width();

                if (w > 768) {
                    if (body.hasClass('offcanvas-menu')) {
                        body.removeClass('offcanvas-menu');
                    }
                }
            })

            body.on('click', '.js-menu-toggle', function (e) {
                const $this = $(this);
                e.preventDefault();

                if (body.hasClass('offcanvas-menu')) {
                    body.removeClass('offcanvas-menu');
                    $this.removeClass('active');
                } else {
                    body.addClass('offcanvas-menu');
                    $this.addClass('active');
                }
            })

            $(document).mouseup(function (e) {
                const container = $(".site-mobile-menu");
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    if (body.hasClass('offcanvas-menu')) {
                        body.removeClass('offcanvas-menu');
                    }
                }
            });
        };
        siteMenuClone();

        const siteCarousel = function () {
            if (nonLoop.length > 0) {
                nonLoop.owlCarousel({
                    center: false,
                    items: 1,
                    loop: true,
                    stagePadding: 0,
                    margin: 0,
                    autoplay: true,
                    nav: true,
                    navText: ['<span class="icon-arrow_back">', '<span class="icon-arrow_forward">'],
                    responsive: {
                        600: {
                            margin: 0,
                            nav: true,
                            items: 2
                        },
                        1000: {
                            margin: 0,
                            stagePadding: 0,
                            nav: true,
                            items: 3
                        },
                        1200: {
                            margin: 0,
                            stagePadding: 0,
                            nav: true,
                            items: 4
                        }
                    }
                });
            }

            $('.single-text').owlCarousel({
                center: false,
                items: 1,
                loop: true,
                stagePadding: 0,
                margin: 0,
                autoplay: true,
                pauseOnHover: false,
                nav: false,
                smartSpeed: 1000,
            });
            $('.slide-one-item').owlCarousel({
                center: false,
                items: 1,
                loop: true,
                stagePadding: 0,
                margin: 0,
                autoplay: true,
                smartSpeed: 1000,
                pauseOnHover: false,
                nav: true,
                navText: ['<span class="icon-keyboard_arrow_left">', '<span class="icon-keyboard_arrow_right">']
            });


            $('.slide-one-item-alt').owlCarousel({
                center: false,
                items: 1,
                loop: true,
                stagePadding: 0,
                margin: 0,
                smartSpeed: 1000,
                autoplay: true,
                pauseOnHover: true,
                mouseDrag: false,
                touchDrag: false,
            });
            $('.slide-one-item-alt-text').owlCarousel({
                center: false,
                items: 1,
                loop: true,
                stagePadding: 0,
                margin: 0,
                smartSpeed: 1000,
                autoplay: true,
                pauseOnHover: true,
                mouseDrag: false,
                touchDrag: false,

            });


            $('.custom-next').click(function (e) {
                e.preventDefault();
                $('.slide-one-item-alt').trigger('next.owl.carousel');
                $('.slide-one-item-alt-text').trigger('next.owl.carousel');
            });
            $('.custom-prev').click(function (e) {
                e.preventDefault();
                $('.slide-one-item-alt').trigger('prev.owl.carousel');
                $('.slide-one-item-alt-text').trigger('prev.owl.carousel');
            });

        };
        siteCarousel()

        const siteCountDown = function () {

            $('#date-countdown').countdown('2020/10/10', function (event) {
                const $this = $(this).html(event.strftime(''
                    + '<span class="countdown-block"><span class="label">%w</span> weeks </span>'
                    + '<span class="countdown-block"><span class="label">%d</span> days </span>'
                    + '<span class="countdown-block"><span class="label">%H</span> hr </span>'
                    + '<span class="countdown-block"><span class="label">%M</span> min </span>'
                    + '<span class="countdown-block"><span class="label">%S</span> sec</span>'));
            });

        };
        siteCountDown();

        const siteDatePicker = function () {

            if (datepicker.length > 0) {
                datepicker.datepicker();
            }

        };
        siteDatePicker();

        const siteSticky = function () {
            $(".js-sticky-header").sticky({topSpacing: 0});
        };
        siteSticky();

        // navigation
        const OnePageNavigation = function () {
            const navToggler = $('.site-menu-toggle');
            $("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function (e) {
                e.preventDefault();

                const hash = this.hash;

                $('html, body').animate({
                    'scrollTop': $(hash).offset().top
                }, 600, 'easeInOutExpo', function () {
                    window.location.hash = hash;
                });

            });
        };
        OnePageNavigation();

        const siteScroll = function () {


            $(window).scroll(function () {

                const st = $(this).scrollTop();

                if (st > 100) {
                    $('.js-sticky-header').addClass('shrink');
                } else {
                    $('.js-sticky-header').removeClass('shrink');
                }

            })

        };
        siteScroll();


        const siteIstotope = function () {
            /* activate jquery isotope */
            const $container = $('#posts').isotope({
                itemSelector: '.item',
                isFitWidth: true
            });

            $(window).resize(function () {
                $container.isotope({
                    columnWidth: '.col-sm-3'
                });
            });

            $container.isotope({filter: '*'});

            // filter items on button click
            $('#filters').on('click', 'button', function () {
                const filterValue = $(this).attr('data-filter');
                $container.isotope({filter: filterValue});
                $('#filters button').removeClass('active');
                $(this).addClass('active');
            });
        }

        siteIstotope();


        $('.fancybox').on('click', function () {
            const visibleLinks = $('.fancybox');

            $.fancybox.open(visibleLinks, {}, visibleLinks.index(this));

            return false;
        });

    });
</script>

</body>
</html>
